<div id="adventure_overview">
  <div class="grid grid-cols-2 md:grid-cols-3 items-center mb-4">
    <div id="level_button" class="dropdown relative">
      <button class="white-btn rounded inline-flex gap-2 text-xl" id="dropdown_level_button"
        onclick="$('#level_dropdown').slideToggle('medium');">
        <span>{{ _('level_title') }} {{ adventure_table.graph_options.level }}</span> <i id="level-arrow"
          class="fa-solid fa-angle-down"></i>
      </button>
      <div class="absolute overflow-hidden block rounded-md ltr:left-0 rtl:right-0 w-40 ltr:mr-1 rtl:ml-1 cursor-auto p-4 shadow-lg dropdown-blue z-20" id="level_dropdown"
        style="display: none; padding: 0px !important; margin: 0px; margin-top: 0.25rem;" _="on mutation of @style
          set arrow to #level-arrow
          if *display == 'none'
          remove .rotate-180 from arrow
          else if not arrow.classList.contains('rotate-180')
          add .rotate-180 to arrow
          end">
        {% for dropdown_level in range(1, 19) %}
        <button id="level_button_{{dropdown_level}}" class="flex-row flex justify-between items-center px-2 py-2 border-b border-dashed border-blue-500
            {% if dropdown_level == adventure_table.level %}bg-white{% else %}hover:bg-blue-100 bg-blue-200{% endif %}"
          {% if dropdown_level==adventure_table.level %}disabled{% endif %} style="width: 100%;"
          hx-get="/for-teachers/grid_overview/{{ class_info.id }}/level?level={{dropdown_level}}"
          hx-target="#adventure_overview" 
          hx-swap="outerHTML"
          _='on htmx:afterRequest wait 150ms then hedyApp.initializeGraph()'>
          <div class="flex-grow h-min" tabindex=0>
            {{ _('level_title') }} {{ dropdown_level }}
          </div>
        </button>
        {% endfor %}
      </div>
    </div>
    <h2 class="justify-self-center m-0">
      {{_('student_adventures_table')}}
      <button type="button" _="on click toggle .hidden on #adventure_table_explanation" title="{{_('more_info')}}">
        <svg class="fill-current h-4 w-4 text-blue-500 cursor-pointer !m-0 !p-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
            <path
            d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM9 11V9h2v6H9v-4zm0-6h2v2H9V5z" />
        </svg>
      </button>
    </h2>
    <div></div>
  </div>
  <div id="adventure_table_explanation" class="hidden mb-4 flex flex-col gap-2 border border-black rounded-lg p-4 text-sm h-full w-full">
    {{_('student_adventures_table_explanation')}}      
  </div>
  {# The actual table that holds the data #}
    {{ render_partial('customize-grid/partial-grid-tables.html',
                            class_info=class_info,
                            level=level,
                            adventure_table=adventure_table,
                            students_info=students_info)
    }}
  <div class="mt-4">
    {% if class_info.students %}
    <h2>
      {{_('performance_graph')}}
      <button type="button" _="on click toggle .hidden on #explanation" title="{{_('more_info')}}">
        <svg class="fill-current h-4 w-4 text-blue-500 cursor-pointer !m-0 !p-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
            <path
            d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM9 11V9h2v6H9v-4zm0-6h2v2H9V5z" />
        </svg>
      </button>
    </h2>
    <div id="explanation" class="hidden flex flex-col gap-2 border border-black rounded-lg p-4 text-sm h-full w-full">
      {{_('class_graph_explanation')}}      
    </div>
    <div class="flex flex-col md:flex-row relative justify-center items-center">
        <div id="graph" class="w-full md:w-2/3 relative h-[32rem]"><canvas data-graph='{{ adventure_table["graph_options"]|tojson|safe }}' id="adventure_bubble"></canvas></div>
        <div class="w-full md:w-1/3 overflow-auto hidden" style="height: 32rem;" id="programs_container"></div>
    </div>
    {% endif %}
  </div>
</div>